<template>
  <el-row class="lb-survey" v-loading="!isLoad">
	<div class="fill-body space-lg"></div>
    <div class="page-main" style="height: 552px">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline" style="color: black">平台总销售额 (不含车费)</div>
        <div>
          <el-button-group>
            <el-button
              @click="toChangeItem('rankInd', index)"
              :plain="rankInd !== index"
              type="primary"
              v-for="(item, index) in rankList"
              :key="index"
              >{{ item.title }}</el-button
            >
          </el-button-group>
          <el-date-picker
            @change="toChangeItem('start_time', $event)"
            v-model="searchForm.data.start_time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :editable="false"
            :clearable="false"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            style="margin-left: 10px"
            v-if="searchForm.data.day === 5"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="space-lg"></div>
      <div class="data-count-list flex-warp">
        <div class="item-child pt-md">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            销售额趋势
          </div>
          <div
            style="width: 100%; height: 400px; background: #fff"
            v-if="isLoad"
          >
            <sales-echarts :datas="tableData.data" />
          </div>
        </div>
        <div class="item-child f-paragraph pt-md">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            城市代理商销售额排名 (不含车费)
          </div>
          <div class="flex-warp" style="margin-top: 20px">
            <div v-if="tableData.agent.length === 0">暂无代理商数据哦</div>
            <div
              :class="[{ 'b-1px-r': tableData.agent.length > 10 }]"
              :style="{
                width: '50%',
                paddingRight: tableData.agent.length > 10 ? '20px' : ''
              }"
            >
              <block v-for="(item, index) in tableData.agent" :key="index">
                <div
                  class="flex-between"
                  :class="[{ 'mt-md': index !== 0 }]"
                  v-if="index < 10"
                >
                  <div class="item-text flex-y-center">
                    <div
                      class="rank-tag flex-center radius mr-md"
                      :style="{
                        color: index < 3 ? '#fff' : '#000',
                        background: index < 3 ? colorType[index] : '#eee'
                      }"
                    >
                      <div class="text">{{ index + 1 }}</div>
                    </div>
                    <div class="ellipsis">
                      {{ item.username }}
                    </div>
                  </div>
                  <div class="c-title">¥{{ item.sale_price }}</div>
                </div>
              </block>
            </div>
            <div class="pl-lg" style="width: 50%; padding-left: 20px">
              <block v-for="(item, index) in tableData.agent" :key="index">
                <div
                  class="flex-between"
                  :class="[{ 'mt-md': index !== 10 }]"
                  v-if="index > 9"
                >
                  <div class="item-text flex-y-center">
                    <div
                      class="rank-tag flex-center radius mr-md"
                      :style="{
                        color: '#000',
                        background: '#eee'
                      }"
                    >
                      <div class="text">{{ index + 1 }}</div>
                    </div>
                    <div class="ellipsis">{{ item.username }}</div>
                  </div>
                  <div class="c-title">{{ item.sale_price }}</div>
                </div>
              </block>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时概况 -->
    <div class="page-main">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline" style="color: black">实时数据</div>
      </div>
      <div class="class-menu-list flex-warp mt-lg pt-md">
        <div class="item-child flex-center" style="background: #21cf21">
          <div class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-kehuguanli c-base" style="color: #2d8cf0"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">全部{{ $t('action.attendantName') }}</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ base_count.total_coach || 0 }}
            </div>
          </div>
        </div>
        <div class="item-child flex-center" style="background: rgb(32, 207, 120)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-zaixian c-base" style="color: #2bcd8e"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">当前在线{{ $t('action.attendantName') }}人数</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ base_count.work_coach || 0 }}
            </div>
          </div>
        </div>
        <div class="item-child flex-center" style="background: rgb(32, 207, 207)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-xiuxi c-base" style="color: #ff6b73"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">休息{{ $t('action.attendantName') }}人数</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ base_count.rest_coach || 0 }}
            </div>
          </div>
        </div>
        <div class="item-child flex-center" style="background: rgb(32, 120, 207)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-jiedan c-base" style="color: #ff6b73"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">接单{{ $t('action.attendantName') }}人数</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ base_count.app_coach || 0 }}
            </div>
          </div>
        </div>
        <div class="item-child flex-center" style="margin-right: 0;background: rgb(120, 207, 32)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont iconwodetuandui1 c-base" style="color: #ffc021"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">用户总数</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ base_count.user_count || 0 }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 营收数据 -->
    <div class="fill-body space-lg"></div>
    <div class="page-main">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline" style="color: black">营收数据</div>
        <el-date-picker
          @change="getTableDataList(1, 'list')"
          v-model="searchForm.list.start_time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <div class="flex-warp mt-lg pt-md">



        <div class="item-child flex-center" style="width: calc((100% - 30px) / 2);margin-right: 30px;border-radius: 4px;padding: 30px 20px;box-sizing: border-box;position: relative;background: rgb(27 152 227)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-caiwuguanli c-base" style="color: #ff6b73"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">昨日营收</div>
			  <div>（不含车费）</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ yesterday_count.price || 0 }}
            </div>
          </div>
        </div>
        <div class="item-child flex-center" style="width: calc((100% - 30px) / 2);border-radius: 4px;padding: 30px 20px;box-sizing: border-box;position: relative;background: rgb(255 178 33)">
          <div
            class="item-icon flex-center radius mb-sm">
            <i class="iconfont icon-dingdanguanli c-base" style="color: #ffc021"></i>
          </div>
          <div class="flex-1 ml-lg c-base">
            <div class="flex-y-baseline">
              <div class="f-paragraph mb-sm">昨日订单量</div>
              <div>（当日0点至24点的订单量，加钟也算一单）</div>
            </div>
            <div class="f-sm-title text-bold">
              {{ yesterday_count.count || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div class="space-lg"></div>
      <el-table
        v-loading="loading.list"
        :data="tableData.list"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          :label="$t('action.attendantName') + 'ID'"
        ></el-table-column>
        <el-table-column
          prop="coach_name"
          :label="$t('action.attendantName') + '姓名'"
        ></el-table-column>
        <el-table-column
          prop="coach_level.title"
          :label="$t('action.attendantName') + '等级'"
        >
          <template slot="header" slot-scope="scope">
            <div style="margin-top: 7px">
              {{ $t('action.attendantName') }}等级<lb-tool-tips padding="10"
                >当前{{ $t('action.attendantName') }}等级</lb-tool-tips
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="coach_level.balance" label="提成比例">
          <template slot-scope="scope">
            {{ `${scope.row.coach_level.balance}%` }}
          </template>
        </el-table-column>
        <el-table-column prop="total_coach_cash" label="提成总金额">
          <template slot-scope="scope">
            {{ `¥${scope.row.total_coach_cash}` }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="pay_price" label="结算时间"></el-table-column> -->
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.list.page"
        :pageSize="searchForm.list.limit"
        :total="total.list"
        @handleSizeChange="handleSizeChange($event, 'list')"
        @handleCurrentChange="handleCurrentChange($event, 'list')"
      >
      </lb-page>
      <div class="space-md"></div>
    </div>
  </el-row>
</template>

<script>
import moment from 'moment'
import salesEcharts from './salesEcharts'
export default {
  components: {
    salesEcharts
  },
  data () {
    return {
      isLoad: false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 59 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      rankInd: 2,
      rankList: [
        {
          id: 1,
          title: '今日'
        },
        {
          id: 2,
          title: '近7日'
        },
        {
          id: 3,
          title: '近30日'
        },
        {
          id: 4,
          title: '今年'
        },
        {
          id: 5,
          title: '自定义'
        }
      ],
      colorType: {
        0: '#608dff',
        1: '#2bcd8e',
        2: '#ff6b73'
      },
      map: null,
      isInitMap: false,
      base_count: {},
      yesterday_count: {},
      loading: { data: false, agent: false, list: false },
      searchForm: {
        data: {
          day: 3,
          start_time: '',
          end_time: ''
        },
        agent: {
          day: 3,
          start_time: '',
          end_time: ''
        },
        list: {
          page: 1,
          limit: 10,
          start_time: '',
          end_time: ''
        }
      },
      tableData: {
        data: [],
        agent: [],
        list: []
      },
      total: {
        data: 0,
        agent: 0,
        list: 0
      }
    }
  },
  created () {
    this.initIndex()
  },
  destroyed () {
    this.destroyMap()
  },
  methods: {
    async initIndex () {
      await Promise.all([this.getTableDataList(1, 'data'), this.getTableDataList(1, 'agent')])
      this.isLoad = true
      let { data } = await this.$api.survey.coachAndUserData()
      this.base_count = data
      await this.getTableDataList(1, 'list')
      this.initMap()
    },
    resetForm (form) {
      let name = `${form}Form`
      this.$refs[name].resetFields()
      this.getTableDataList(1, form)
    },
    handleSizeChange (val, key) {
      this.searchForm[key].limit = val
      this.handleCurrentChange(1, key)
    },
    handleCurrentChange (val, key) {
      this.searchForm[key].page = val
      this.getTableDataList('', key)
    },
    /**
     * @method: 获取列表
     */
    async getTableDataList (flag, key) {
      if (flag) this.searchForm[key].page = 1
      this.loading[key] = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm[key]))
      let { start_time: time } = searchForm
      if (time && time.length > 0) {
        searchForm.start_time = time[0] / 1000
        searchForm.end_time = time[1] / 1000
      } else {
        searchForm.start_time = ''
        searchForm.end_time = ''
      }
      let methodArr = {
        data: 'orderData',
        agent: 'agentOrderData',
        list: 'coachSaleData'
      }
      let methodModel = methodArr[key]
      let { code, data } = await this.$api.survey[methodModel](searchForm)
      this.loading[key] = false
      if (code !== 200) return
      if (['data', 'agent'].includes(key)) {
        this.tableData[key] = data
        return
      }
      let { data: datas, total = 0 } = data.list
      this.tableData[key] = datas
      this.total[key] = total
      let { yesterday_count: count, yesterday_price: price } = data
      this.yesterday_count = {
        count, price
      }
    },
    toChangeItem (key, val) {
      let { time = [] } = this.searchForm.data
      if (key === 'rankInd') {
        let arr = ['data', 'agent']
        let { id } = this.rankList[val]
        arr.map(item => {
          this.searchForm[item].day = id
          this.searchForm[item].start_time = time
        })
        this[key] = val
        if (val === 4 && this.searchForm.data.start_time.length === 0) return
      } else {
        this.searchForm.agent.start_time = val
      }
      this.getTableDataList(1, 'data')
      this.getTableDataList(1, 'agent')
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-survey {
  #map-container-box {
    width: 100%;
    height: 750px;
    margin: 0 auto;
  }
  .data-count-list {
    height: 420px;
    .item-child {
      height: 420px;
      .item-text {
        width: 70%;
        .rank-tag {
          width: 25px;
          height: 25px;
          .text {
            transform: scale(0.8);
          }
        }
        .ellipsis {
          max-width: calc(100% - 35px);
        }
      }
    }
    .item-child:nth-child(1) {
      width: 60%;
    }
    .item-child:nth-child(2) {
      width: 40%;
    }
  }
  .class-menu-list {
    .item-child {
      width: calc((100% - 120px) / 5);
      margin-right: 30px;
      border-radius: 4px;
      padding: 30px 20px;
      box-sizing: border-box;
      position: relative;
    }
  }
  .item-icon {
    width: 50px;
    height: 50px;
	background: #fff;
    .iconfont {
      font-size: 25px;
    }
  }
}
</style>
